<template>
  <!-- 报名表单 -->
  <div class="pageWrap">
    <el-card class="box_card" v-for="(v, i) in cardArr" :key="i">
      <div slot="header" class="clearfix">
        <span>选手个人信息采集表{{ i + 1 }}</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        <i
          class="el-icon-close"
          style="float: right; padding: 3px 0"
          @click="delForm(i)"
        ></i>
      </div>
      <el-form label-width="150px">
        <el-form-item label="选手个人信息采集表">
          <span class="fItem" v-for="(vv, ii) in v.list" :key="ii">{{
            vv.name
          }}</span>
          <span class="fItem edit" @click="editFrom(i)">编辑报名表单</span>
        </el-form-item>
        <el-form-item label="应用组别">
          <el-checkbox-group v-model="v.groupClist" @change="groupC()">
            <el-checkbox
              v-for="(gv, gi) in v.groupArr"
              :key="gi"
              :label="gv.id"
              >{{ gv.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-button type="primary" @click="saveform(i)">保存表单</el-button>
      </el-form>
    </el-card>
    <el-button type="primary" class="addBtn" @click="addCard"
      >添加报名表单</el-button
    >
    <el-dialog title="用户填写内容" :visible.sync="dialogVis" width="90%">
      <el-form class="dislogFrom">
        <el-form-item v-for="(v, i) in subForm" :key="i">
          <div slot="label" class="fromTit">
            <p class="hasC no_name" @click="filterProject(1, i, v.name)">
              {{ v.name }}
            </p>
            <div class="rightBtn">
              <p
                class="sb no_name"
                :class="v.must == 1 ? 'hasC' : ''"
                @click="cancleMust(v)"
              >
                是否必填
              </p>
              <i class="el-icon-top topIcon" @click="goPrev(i)"></i>
            </div>
          </div>
          <el-input
            v-model="v.tip"
            placeholder="该报名项填写注意事项"
            clearable
          ></el-input>
          <div v-if="v.definedType == 6">
            <p>多个选项填写在此，以中文；分隔</p>
            <el-input
              v-model="v.val"
              placeholder="例：12；23"
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <div class="noChoose">
          <li
            v-for="(v, i) in noFrom"
            :key="i"
            class="no_li"
            @click="filterProject(2, i)"
          >
            <p class="no_name">{{ v.name }}</p>
            <!-- <el-input v-model="v.name" placeholder="请输入所填项名称" style="width:200px" v-else></el-input> -->
          </li>
          <el-button @click="customShow=true">添加自定义报名项</el-button>
        </div>
      </el-form>
      <div class="dialogFooter">
        <!-- <el-button @click="dialogVis = false">取 消</el-button> -->
        <el-button type="primary" @click="sureFrom()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="自定义报名项" :visible.sync="customShow">
      <el-form class="dislogFrom" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="customName" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="customType" placeholder="请选择类型" style="width:200px">
            <el-option label="输入框" value="1"></el-option>
            <el-option label="普通选择框" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
        <el-button @click="customShow = false">取 消</el-button>
        <el-button type="primary" @click="addCustom()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
var initProject = [
  // 暂未添加设置自定义项
  {
    name: "姓名", //字段值
    must: 1, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: true, // 是否勾选
    // uid: 1, //排序
    definedType: "1", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "手机号", //字段值
    must: 1, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: true, // 是否勾选
    definedType: "2", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "性别", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "5", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "出生日期", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "7", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "证件类型", //字段值
    must: 0, //是否必填
    val: "身份证；护照；其他", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "11", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "证件号码", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "4", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "血型", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "6", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  // {
  //   name: "国籍", //字段值
  //   must: 0, //是否必填
  //   val: "", // 默认值
  //   tip: "", //注意事项
  //   checked: false, // 是否勾选
  //   definedType: "9", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  // },
  {
    name: "地区", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "10", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "详细地址", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "1", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "邮箱", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "3", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "衣服尺码", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "6", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "鞋子尺码", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "6", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "紧急联系人", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "1", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "紧急联系电话", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "", //注意事项
    checked: false, // 是否勾选
    definedType: "2", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "完赛证明", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "注：付款成功后，报名状态需审核", //注意事项
    checked: false, // 是否勾选
    definedType: "8", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
  {
    name: "健康证明", //字段值
    must: 0, //是否必填
    val: "", // 默认值
    tip: "注：付款成功后，报名状态需审核", //注意事项
    checked: false, // 是否勾选
    definedType: "8", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
  },
];
let initVal = {
  groupClist: [],
  matchId: "",
  groupId: "",
  list: [
    {
      name: "姓名", //字段值
      must: 1, //是否必填
      val: "", // 默认值
      tip: "", //注意事项
      checked: true, // 是否勾选
      // uid: 1, //排序
      definedType: "1", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
    },
    {
      name: "手机号", //字段值
      must: 1, //是否必填
      val: "", // 默认值
      tip: "", //注意事项
      checked: true, // 是否勾选
      definedType: "2", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
    },
  ],
  groupArr: [],
};
var groupAll = [];
export default {
  data() {
    return {
      dialogVis: false,
      cardArr: [],
      subForm: [
        {
          name: "姓名", //字段值
          must: 1, //是否必填
          val: "", // 默认值
          tip: "", //注意事项
          checked: true, // 是否勾选
          // uid: 1, //排序
          definedType: "1", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
        },
        {
          name: "手机号", //字段值
          must: 1, //是否必填
          val: "", // 默认值
          tip: "", //注意事项
          checked: true, // 是否勾选
          definedType: "2", // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
        },
      ],
      noFrom: [],
      currI: 0,
      //   groupArr: [],
      hasGroup: [], //已设置的赛项
      // 自定义
      customShow:false,
      customName:'',
      customType:'1'
    };
  },
  methods: {
    //   添加表单
    addCard() {
      let acg = this.cardArr.map((v) => v.groupClist);
      acg = [].concat.apply([], acg);
      initVal.groupArr = groupAll.filter((v) => {
        return !acg.includes(v.id);
      });
      //   console.log(initVal.groupArr);
      if (initVal.groupArr.length != 0) {
        this.cardArr.push(JSON.parse(JSON.stringify(initVal)));
      } else {
        this.$message.error("所有组别已有对应报名表单");
      }
    },
    // 编辑表单
    editFrom(i) {
      this.subForm = this.cardArr[i].list;
      // console.log(this.subForm);
      this.currI = i;
      let filterArr = [];
      this.subForm.map((val, i) => {
        filterArr.push(val.name);
      });
      this.noFrom = initProject.filter((val, i) => {
        // 过滤arr
        return !filterArr.includes(val.name);
      });
      this.dialogVis = true;
    },
    // 向前挪一位
    goPrev(i) {
      // console.log(this.subForm);
      if (i == 0) {
        return false;
      }
      let vv = this.subForm.splice(i, 1)[0];
      this.subForm.splice(i - 1, 0, vv);
    },
    // 必填
    cancleMust(v) {
      if (v.name == "姓名" || v.name == "手机号") {
        this.$message.warning("必填项不可取消");
        return false;
      }
      v.must = v.must == 1 ? 0 : 1;
    },
    // 填写项
    filterProject(n, i, name) {
      if (name == "姓名" || name == "手机号") {
        this.$message.warning("必填项不可取消");
        return false;
      }
      if (n == 1) {
        this.subForm.splice(i, 1);
      } else if (n == 2) {
        // if (!this.noFrom[i].name) {
        //   this.$message("请输入所填项名称");
        //   return false;
        // }
        let p = JSON.parse(JSON.stringify(this.noFrom[i]));
        p.checked = true;
        this.subForm.push(p);
      }
      let filterArr = [];
      this.subForm.map((val, i) => {
        filterArr.push(val.name);
      });
      this.noFrom = initProject.filter((val, i) => {
        // 过滤arr
        return !filterArr.includes(val.name);
      });
    },
    // 确认表单
    sureFrom() {
      this.cardArr[this.currI].list = this.subForm;
      this.dialogVis = false;
    },
    // 获取赛项
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          //   this.groupArr = rr.matchInfoLists;
          groupAll = rr.matchInfoLists;
          this.getFrom();
        });
    },
    // 提交表单
    saveform(i) {
      if (this.cardArr[i].groupClist.length == 0) {
        this.$message.error("请选择应用组别");
        return false;
      }
      this.cardArr[i].matchId = this.$Base64.decode(
        sessionStorage.getItem("MandA")
      );
      this.cardArr[i].groupId = this.cardArr[i].groupClist.join(",");
      this.cardArr[i].list.forEach((v, i) => (v.uid = i + 1));
      this.$axios
        .post("/sbr/applyForm/putMatchApplyForm", this.cardArr[i])
        .then((res) => {
          this.$message.success("该表单保存成功");
        });
    },
    // 获取表单
    getFrom() {
      this.$axios
        .get(
          "/sbr/applyForm/getApplyFormList/" + sessionStorage.getItem("MandA")
        )
        .then((res) => {
          let rr = res.data.data;
          if (rr.length == 0) {
            initVal.groupArr = groupAll;
            this.cardArr = [JSON.parse(JSON.stringify(initVal))];
          } else {
            rr.forEach((v) => {
              v.groupClist = v.groupId.split(",").map(Number);
            });
            let acg = rr.map((v) => v.groupClist);
            acg = [].concat.apply([], acg);
            let ncg = groupAll.filter((v) => {
              return !acg.includes(v.id);
            });
            rr.forEach((v) => {
              let isg = groupAll.filter((vv) => {
                return v.groupClist.includes(vv.id);
              });
              v.groupArr = isg.concat(ncg);
            });
            this.cardArr = rr;
          }
        });
    },
    // 选择表单赛项
    groupC() {
      // console.log(this.cardArr);
      let acg = this.cardArr.map((v) => v.groupClist);
      acg = [].concat.apply([], acg);
      let ncg = groupAll.filter((v) => {
        return !acg.includes(v.id);
      });
      this.cardArr.forEach((v) => {
        let isg = groupAll.filter((vv) => {
          return v.groupClist.includes(vv.id);
        });
        v.groupArr = isg.concat(ncg);
      });
    },
    // 删除设置项
    delForm(i) {
      if (i == 0) {
        this.$message.error("最少保留一项");
        return false;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.cardArr[i].matchId = this.$Base64.decode(
            sessionStorage.getItem("MandA")
          );
          this.cardArr[i].groupId = this.cardArr[i].groupClist.join(",");
          this.cardArr[i].list = [];
          this.$axios
            .post("/sbr/applyForm/putMatchApplyForm", this.cardArr[i])
            .then((res) => {
              this.cardArr.splice(i, 1);
              this.groupC();
              this.$message.success("删除成功!");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加自定义报名项
    addCustom() {
          this.subForm.push({
            name: this.customName, //字段值
            must: 0, //是否必填
            val: "", // 默认值
            tip: "", //注意事项
            checked: false, // 是否勾选
            // uid: 1, //排序
            definedType: this.customType, // 1=>输入框 2=>手机号 3=>邮箱 4=>证件号 5=>单选 6=>普通下拉选择&&需设置值 7=>日期 8=>图片 9=>国籍选择 10=> 省市区选择 11=>证件类型
          });
          this.customShow=false
    },
  },
  created() {
    this.filterProject();
    this.getGroupArr();
  },
};
</script>
<style scoped>
.fItem {
  float: left;
  padding: 0 15px;
  margin: 0 10px 10px 0;
  background-color: #e6ecf0;
  color: #409eff;
  line-height: 36px;
  border-radius: 5px;
}
.edit {
  border: 1px solid #409eff;
  background-color: #fff;
  line-height: 34px;
  cursor: pointer;
}
.dislogFrom {
  float: left;
  width: 70%;
  overflow: hidden;
}
.dialogFooter {
  width: 100%;
  float: left;
}
.pageWrap >>> .el-dialog__body {
  overflow: hidden;
}
.fromTit {
  width: 100%;
  line-height: 40px;
}
.rightBtn {
  float: right;
}
.noChoose {
  width: 100%;
  overflow: hidden;
  background-color: #f3f6f8;
  border-radius: 5px;
  margin-bottom: 10px;
}
.no_li {
  line-height: 30px;
}
.no_name {
  overflow: hidden;
}
.no_name::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid #ccc;
  border-radius: 2px;
  float: left;
  margin: 7px 5px;
}
.hasC::before {
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 14px;
  margin: 12px 5px;
}
.hasC {
  position: relative;
  float: left;
}
.sb {
  position: relative;
  float: left;
  margin-right: 8px;
  cursor: pointer;
}
.sb::before {
  text-align: center;
  line-height: 14px;
  margin: 12px 5px;
}
.hasC::after {
  box-sizing: content-box;
  content: "";
  border: 1px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 11px;
  position: absolute;
  top: 15px;
  transform: rotate(45deg) scaleY(1);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
.dislogFrom >>> .el-form-item__label {
  float: left;
  width: 100%;
}
.dislogFrom >>> .el-form-item__content {
  float: left;
  width: 100%;
}
.topIcon {
  font-size: 18px;
  line-height: 40px;
  cursor: pointer;
}
.box_card {
  margin-bottom: 16px;
}
.addBtn {
  margin-top: 16px;
}
</style>